<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/static/v1/iview/v2/iview.css">
    <link rel="stylesheet" type="text/css" href="/static/v1/style/app.css">
    <link rel="stylesheet" href="__STATIC__/store/css/quill-snow.css">
    <script src="__STATIC__/store/js/quill.js"></script>
    <script src="__STATIC__/store/js/vue-quill-editor.js" charset="UTF-8"></script>
</head>
<body>
<div id="vueApp" v-cloak>
    <Spin size="large" fix v-if="spinShow"></Spin>
    <Row>
        <i-col span="24" style="padding-bottom: 50px"
               :xs="{ span: 24, offset: 0 }"
               :sm="{ span: 24, offset: 0 }"
               :md="{ span: 24, offset: 0 }"
               :xs="{ span: 24, offset: 0 }"
               :lg="{ span: 16, offset: 3 }"
               :xl="{ span: 18, offset: 3 }"
               :xxl="{ span: 18, offset: 3 }"
        >
<!--            <affix>-->
<!--                <tabs style="background: white" v-model="tab_pane_value" @on-click="tabPaneClickEvent">-->
<!--                    <tab-pane label="基本信息" name="info"></tab-pane>-->
<!--                    <tab-pane label="价格设置" name="amount"></tab-pane>-->
<!--                    <tab-pane label="规格设置" name="spec"></tab-pane>-->
<!--                    <tab-pane label="商品详情" name="details"></tab-pane>-->
<!--                    <tab-pane label="营销设置" name="marketing"></tab-pane>-->
<!--                    <tab-pane label="其他设置" name="other"></tab-pane>-->
<!--                </tabs>-->
<!--            </affix>-->
            <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="140" style="margin-top: 18px;" role="form" id="i-forms-cc">
                <tempalte v-if="tab_pane_value == 'info'">
                    {include file='points_mall/goods/step/info' /}
                </tempalte>
<!--                <tempalte v-if="tab_pane_value == 'amount'">-->
<!--                    {include file='points_mall/goods/step/amount' /}-->
<!--                </tempalte>-->
<!--                <tempalte v-if="tab_pane_value == 'spec'">-->
<!--                    {include file='points_mall/goods/step/spec' /}-->
<!--                </tempalte>-->
<!--                <tempalte v-if="tab_pane_value == 'details'">-->
<!--                    {include file='points_mall/goods/step/details' /}-->
<!--                </tempalte>-->
<!--                <tempalte v-if="tab_pane_value == 'marketing'">-->
<!--                    {include file='points_mall/goods/step/marketing' /}-->
<!--                </tempalte>-->
<!--                <tempalte v-if="tab_pane_value == 'other'">-->
<!--                    {include file='points_mall/goods/step/other' /}-->
<!--                </tempalte>-->
                <form-item style="text-align: left;border-top: 1px solid #ccc;padding: 15px 0 ;background: white;margin-bottom: 0;padding-left: 0px">
                    <i-button size="large" type="primary" @click="discountCouponsSubmitEvent('formValidate')" :loading="submitLoading" style="width: 150px">提 交</i-button>
                    <i-button size="large" @click="discountCouponsReturnPreviousPageEvent" style="margin-left: 20px;width: 100px">返 回</i-button>
                </form-item>
            </i-form>
        </i-col>
    </Row>
    {include file='marketing/_component/select-discount-coupons' /}
</div>
<script type="text/javascript" src="/static/v1/iview/v2/vue.min.js"></script>
<script type="text/javascript" src="/static/v1/iview/v2/iview.min.js"></script>
<script type="text/javascript" src="/static/v1/script/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/static/v1/script/app.js"></script>

<script>
    Vue.use(window.VueQuillEditor)
    new Vue({
        el: '#vueApp',
        mixins: [_discountCouponsV2,_selectDiscountCouponsComponent],
        data: {
            spinShow:true,
            tab_pane_value:'info',
            goodsTypeItems:[
                {value: 1, label: '优惠劵'},
                {value: 2, label: '现金红包'},
                {value: 3, label: '实物商品'},
                {value: 4, label: '虚拟商品'},

            ],
            paymentTypeItems:[
                {value: 1, label: '积分'},
                {value: 2, label: '青年币'},
                {value: 3, label: '积分+现金'},
                {value: 4, label: '青年币+现金'},
                {value: 5, label: '现金'},
            ],
            goodsCategoryItems:[],
            editorOption: {
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike', 'blockquote'],    //加粗，斜体，下划线，删除线
                        [{'header': 1}, {'header': 2}],        // 标题，键值对的形式；1、2表示字体大小
                        [{'list': 'ordered'}, {'list': 'bullet'}],     //列表
                        [{'script': 'sub'}, {'script': 'super'}],   // 上下标
                        [{'indent': '-1'}, {'indent': '+1'}],     // 缩进
                        [{'size': ['small', false, 'large', 'huge']}], // 字体大小
                        [{'header': [1, 2, 3, 4, 5, 6, false]}],     //几级标题
                        [{'color': []}, {'background': []}],     // 字体颜色，字体背景颜色
                        [{'align': []}],    //对齐方式
                        ['clean'],    //清除字体样式
                        ['image', 'video', 'link', 'clean']    //上传图片、上传视频
                    ]
                },
                height: '200px',
                theme: 'snow'
            },
            submitLoading: false,
            formValidate: {
                goods_type:1,
                reward_coupons_id:[],
                name: '',
                category_id: '',
                cover: '',
                banner: [],
                keyword:'',
                introduce:'',
                describe:'',
                sales_price: '',
                market_price: '',
                stock:'',
                payment_type:1,
                point_amount:'',
                youth_amount:'',
                purchase_amount:'',

                people_exchange_stated:1,
                people_exchange_num:1,
                date_exchange_stated:1,
                date_exchange_days:1,
                date_exchange_num:1,

                status:1,
                listing_time:'',
                scheduled_off:2,
                scheduled_time:''
            },
            ruleValidate: {

            }
        },
        methods: {

            imageRemoveClickEvent(field) {
                let _this = this;
                _this.formValidate[field] = '';
            },
            shareSuccess(res, file) {
                let _this = this;
                if(res.code === 0){
                    _this.$Message.error(res.msg);
                }else{
                    _this.formValidate.share_img = res.data.url;
                }
                _this.$Spin.hide();
            },
            coverSuccess(res, file) {
                let _this = this;
                if(res.code === 0){
                    _this.$Message.error(res.msg);
                }else{
                    _this.formValidate.cover = res.data.url;
                }
                _this.$Spin.hide();
            },
            bannerSuccess(res, file) {
                let _this = this;
                if(res.code === 0){
                    _this.$Message.error(res.msg);
                }else {
                    _this.formValidate.banner.push(res.data.url);
                }
                _this.$Spin.hide();
            },
            discountCouponsSubmitEvent(name) {
                let __that = this;
                __that.submitLoading = true;
                __that.$refs[name].validate((valid) => {
                    if (valid) {
                        $.post('/admin.php/points_mall/goods/update_submit', __that.formValidate, function (res) {
                            if (res.code === 1) {
                                __that.$Message.success(res.msg);
                                setTimeout(function () {
                                    __that.discountCouponsReturnPreviousPageEvent();
                                }, 1000);
                            } else {
                                __that.$Message.error(res.msg);
                                __that.submitLoading = false;
                            }
                        });
                    }
                })
            },
            discountCouponsReturnPreviousPageEvent() {
                window.location.href = '/admin.php/points_mall/goods';
            },

            myQuillDescribeEditorImgHandler(state) {
                let _this = this;
                _this.addRange = _this.$refs.myQuillDescribeEditor.quill.getSelection()
                let fileInput = document.getElementById('QuillDescribeEditorUploadButton')
                fileInput.click()
            },
            QuillDescribeEditorUploadSuccess(res, file) {
                let _this = this;
                if(res.code === 0){
                    _this.$Message.error(res.msg);
                }else {
                    if (res.data.fullurl) {  // 将文件上传后的URL地址插入到编辑器文本中
                        let value = res.data.fullurl
                        _this.addRange = _this.$refs.myQuillDescribeEditor.quill.getSelection()
                        _this.$refs.myQuillDescribeEditor.quill.insertEmbed(this.addRange !== null ? _this.addRange.index : 0, 'image', value, Quill.sources.USER)   // 调用编辑器的 insertEmbed 方法，插入URL
                    }
                }
                _this.$Spin.hide();
            },
            participationRulesSelectDiscountCouponsClickEvent(model){
                let _this = this;
                _this.selectDiscountCouponsOpenEvent(function (selected){
                    _this.formValidate[model] = selected;
                }, _this.formValidate[model], 5)
            },

            participationRulesCouponsRemoveEvent:function (index, model){
                let _this = this;
                _this.formValidate[model].splice(index,1);
            },
            getGoodsCategory() {
                let _this = this;
                $.post('/admin.php/points_mall/goods/get_goods_category', function (data) {
                    _this.goodsCategoryItems = data.data;
                });
            },
            getGoodsDetails() {
                let _this = this;
                $.post(window.location.href, function (data) {
                    _this.formValidate = data.data;
                    _this.spinShow = false;
                });
            },
        },
        mounted() {
            let _this = this;
            //_this.$refs.myQuillDescribeEditor.quill.getModule('toolbar').addHandler('image', _this.myQuillDescribeEditorImgHandler);
            _this.getGoodsCategory();
            _this.getGoodsDetails();
        }
    });

</script>
</body>
</html>